<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jq选择器</title>
		<style type="text/css">
			/* div{
				background: ;
			} */
		</style>
	</head>
	<body>
		<div>
			<div></div>
			<div>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul>
			</div>
			<div></div>
		</div>
		<div id="div1"></div>
		<div class="div2"></div>
		<div class="div2"></div>

		<script src="jquery-3.6.0/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//大部分选择器都同CCS选择器类似
			
			//选择该文档的根元素，而在HTML中，文档根元素永远是<html>元素，所以同$("html")
			$(":root").css("background-color","#feffbc");

			$("#div1").css({
				"height": "100px",
				"background-color": "#55ff7f"
			}).click(() => {
				// console.log($(this));
				$("#div1:not(:animated)").animate({
					height: "+=20"
				}, 1000);
			});
			
			//选择ul下的奇数行li
			$("ul li:even").css("border","1px solid #ff5500")
		</script>
	</body>
</html>
